<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>缓动的小球</title>
    <style type="text/css">
       h1{
           font-size: 55px;
           letter-spacing: 3px;
       }
       #box{
           position: absolute;
           width: 120px;
           height: 120px;
           line-height: 120px;
           text-align: center;
           background: red;
           color: aliceblue;
           border-radius: 60px;
       }
       a{
           width: 200px;
           height: 30px;
           display: block;
           margin: 0 auto;
           margin-top: 280px;
           text-decoration: none;
           letter-spacing: 1px;
           font-size: 37px;
       }
    </style>
</head>
<body>
    <h1 align="center">缓动的小球</h1>
    <div id="box">点我啊，跑！</div>
    <script>
    function animate(obj, option) {
        clearInterval(obj.timer);                          
        obj.timer = setInterval(function() {
          var flag = true;                                  
          for (var k in option) {
            var leader = parseInt(getStyle(obj, k)) || 0;   
            var target = option[k];                        
            var step = (target - leader) / 10;              
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            leader = leader + step;          
            obj.style[k] = leader + 'px';     
            if (leader != target) {           
              flag = false;
            }
          }
          if (flag) {                         
            clearInterval(obj.timer);
          }
        }, 15);
      }
      function getStyle(obj, attr) {
        if (window.getComputedStyle) {        
          return window.getComputedStyle(obj, null)[attr];
        } else {                              
          return obj.currentStyle[attr];
        }
      }
      var obj = document.getElementById('box');
      obj.onclick = function() {
        animate(obj, {'left': 300, 'top': 20});
      };
    </script>
   </script>
    
   
</body>
</html>